<template>
	<view class="order-list">
		<view class="icon-nav">
			<view>
				<view class="iconfont icon-dingdan_dingdanliebiao"></view>
				<view>全部</view>
			</view>
			<view>
				<view class="iconfont icon-31daifukuan"></view>
				<view>待付款</view>
			</view>
			<view>
				<view class="iconfont icon--fuwu-xianxing"></view>
				<view>待服务</view>
			</view>
			<view>
				<view class="iconfont icon-daishouhuo"></view>
				<view>待收货</view>
			</view>
			<view>
				<view class="iconfont icon-31daipingjia"></view>
				<view>待评价</view>
			</view>
		</view>
		<view class="list">
			<view class="list-item" v-for="(item,index) in orderList" :key="item._id">
				<view class="title">
					<view>订单编号:{{item.orderNumber}}<text class="iconfont icon-fuzhi"></text></view>
					<view class="status">{{item.orderStatus === '06'?'已取消':'等待付款'}}</view>
				</view>
				<view class="commodity">
					<view class="commodity-item"><text class="iconfont icon-shangpin1"></text>{{item.orderProductName}}
					</view>
					<view class="commodity-item"><text class="iconfont icon-leixing"></text>3天2夜</view>
				</view>
				<view class="operation">
					<view>
						<view>共计<text class="unit">￥</text><text class="money">{{item.orderMoney}}</text></view>
						<view class="time">{{item.orderServeStart}}</view>
					</view>
					<view v-if="item.orderStatus == '01'">
						<button type="default" size="mini" @click="cancelOrder(item._id)">取消订单</button>
						<button class="confirm" type="primary" size="mini">立即支付</button>
					</view>
					<view v-if="item.orderStatus == '02'">
						<button class="confirm" type="primary" size="mini" disabled>待服务</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		orderlist,
		deleteOrder
	} from '@/api/user.js'
	import {
		useStore
	} from 'vuex' // 引入useStore 方法
	const store = useStore()
	let orderList = ref([])
	const getOrderList = () => {
		let data = {
			orderPlacer: store.state.user.userInfo.id
		}
		orderlist(data).then(res => {
			let {
				code,
				data
			} = res;
			// console.log(res)
			if (code == 200) {
				orderList.value = data;
			}

		})
	}
	const cancelOrder = (id) => {
		console.log(id)
		let data = {
			id
		}
		deleteOrder(data).then(res => {
			console.log(res)
			let {
				code
			} = res;
			if (code === 200) {
				uni.showToast({
					title: '取消订单成功',
					duration: 2000
				});
				getOrderList()
			}
		})
	}
	onMounted(() => {
		getOrderList();
	})
</script>

<style lang="scss">
	.order-list {
		background: #f3f5f7;
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		padding: 10px;

		.icon-nav {
			padding: 30upx 0 30upx 0;
			display: flex;
			justify-content: space-around;
			text-align: center;
			background: #fff;
			border-radius: 5px;

			.iconfont {
				font-size: 48upx;
				margin-bottom: 10upx;
				color: #17adf0;
			}
		}

		.list {
			.list-item {
				color: #898a91;
				background: #fff;
				margin-top: 20upx;
				padding: 20upx;
				border-radius: 5px;

				.title {
					padding: 10upx 0;
					display: flex;
					justify-content: space-between;

					.status {
						color: #2185fa;
					}
				}

				.iconfont {
					margin-left: 10upx;
				}
			}

			.commodity {
				color: #07031b;
				padding: 40upx 0 30upx 0;

				&-item {
					margin-bottom: 16upx;
				}

				.iconfont {
					margin-right: 20upx;
					margin-left: 0;

					&.icon-leixing {
						margin-left: -2upx;
						font-size: 40upx;
					}

					&.icon-shangpin1 {
						font-size: 38upx;
						margin-top: 12upx;
					}

				}
			}


			.operation {
				color: #07031b;
				display: flex;
				justify-content: space-between;
				align-items: center;

				button {
					margin-left: 10upx;
				}

				.unit {
					color: #ff893f;
				}

				.money {
					color: #ff893f;
					font-size: 38upx;
					font-weight: bold;
				}

				.time {
					color: #898a91;
					font-size: 24upx;
					margin-top: 10upx;
				}

				.confirm {
					background: #2185fa;
				}

				button {
					border-radius: 50upx;
				}
			}
		}
	}
</style>
